<template>
  <div class="list-b-12">
    <FlexBox :margin="1">
      <ElFormItemBox label="产品名称">
        {{ data?.productName || '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="产品版本">
        {{ data?.productVersion || '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="产品型号">
        {{ data?.productSpecificationName || '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="生产日期">
        {{ data?.produceDate || '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="库存数量">
        {{ data?.stockQuantity || data?.stockQuantity === 0 ? data?.stockQuantity : '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="待发货数">
        {{ data?.saleOrders?.length > 0 ? proxy.$arrTotal(data?.saleOrders || [], 'waitDeliveryQuantity') : '--' }}
      </ElFormItemBox>
      <ElFormItemBox label="发货总数">
        {{ proxy.$arrTotal(form?.fhMxList || [], 'deliveryQuantity') }}
      </ElFormItemBox>
    </FlexBox>
    <FlexListBox :data="data?.saleOrders" v-if="data?.saleOrders?.length > 0">
      <template #item="{ row }">
        <div class="saleOrders-item" :class="className(row, form)" @click="() => {
          row.produceDate = proxy.$day(row.produceDate)
          form.saleOrders = [row]
          data.form.produceDate = row.produceDate
        }">
          <h3>{{ row.xieYiShuHao }}</h3>
          <div>
            <p>{{ `待发数量：${row.waitDeliveryQuantity}${row.productUnit}` }}</p>
            <p>{{ `产品版本：${row.productLayout}` }}</p>
          </div>
        </div>
      </template>
    </FlexListBox>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    form?: any;
  }>(),
  {

  },
);
const className = (row: any, form: any) => {
  const _saleOrders = form.saleOrders
  if (_saleOrders.length > 0 && row.orderProductSpecificationCode === _saleOrders[0].orderProductSpecificationCode) {
    return 'bg-color-primary text-color-white'
  } else {
    return ''
  }

}
onUnmounted(() => { });
</script>
<style scoped lang="scss">
.saleOrders-item {
  background: $bg;
  padding: 8px;
  cursor: pointer;
}
</style>
